03. Create React App

Create React App

💡Before Installing create-react-app💡

If you already have Node.js on your machine, it's a good idea to reinstall it to make sure you have the latest version. Keep in mind that Node.js now comes with npm by default.

MacOS

  1. Install Homebrew by running /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" in the terminal.
  • Check that it was installed by running brew --version. You should see the version number that was installed.
  • Run brew install node.
  • Run node --version.
  • Check that npm was installed as well by running npm --version.
  • Run brew install yarn.
  • Run npm --version.
  • Run yarn install && yarn --version

Windows

  1. Please download the Node.js Installer, go through the installation process, and restart your computer once you're done.

Linux

  1. Please follow [these instructions](https://www.ostechnix.com/install-node-js-linux
    ) to install Node.js.
  • Run sudo apt-get install -y build-essential.
  • Please follow the yarn installation instructions.
  • Run yarn --version to make sure yarn has been successfully installed.

Scaffolding Your React App

JSX is awesome, but it does need to be transpiled into regular JavaScript before reaching the browser. We typically use a transpiler like Babel to accomplish this for us. We can run Babel through a build tool, like Webpack which helps bundle all of our assets (JavaScript files, CSS, images, etc.) for web projects.

To streamline these initial configurations, we can use Facebook's Create React App package to manage all the setup for us! This tool is incredibly helpful to get started in building a React app, as it sets up everything we need with zero configuration! Install Create React App (through the command-line with npm), and then we can walk through what makes it so great.

npm install -g create-react-app

If you're seeing errors when trying to install a package globally, feel free to check out this article in the npm documentation. Note that to find out where global packages are installed, you can run npm list -g in your console (more information here).

Installing & Using Create React App

Task Description:

Let's make sure we're both on the same page.

Task List:

Task Feedback:

You are now ready to go!

The Yarn Package Manager

Both in the following video and in the output of create-react-app, we're told to use yarn start to start the development server. If you haven't heard about it yet, Yarn is a package manager that's similar to NPM. Yarn was created from the ground up by Facebook to improve on some key aspects that are slow or lacking in NPM.

If you don't want to install Yarn, you don't have to! What's great about it is that almost every use of yarn can be swapped with npm and everything will work just fine! So if the command is yarn start, you can use npm start to run the same command.

Inspect Contacts Project

The observant student might've noticed that my index.js file does not include the line registerServiceWorker(); that's showing in your project. The call to the Service Worker was added in the version of Create React App right after I recorded this video. Since we're not using Service Workers in this project, it won't affect anything. If you want to remove it, though. Feel free!

create-react-app Recap

Facebook's create-react-app is a command-line tool that scaffolds a React application. Using this, there is no need to install or configure module bundlers like Webpack, or transpilers like Babel. These come preconfigured (and hidden) with create-react-app, so you can jump right into building your app!

Check out these links for more info about create-react-app:

Next Concept